<template>
  <div class="content1">
    <!--导航栏开始-->
    <nav-tab :navIndex="7"></nav-tab>
    <!-- 内容 -->
    <div class="hengfu">
      <img src="../assets/5-9.jpg" />
    </div>
    <div class="con">
      <p class="text">当前位置：<router-link to="/">首页</router-link>>>新闻动态>>{{ title }}</p>
      <div class="newsbox">
        <div class="newsbox_top">
          <div class="nav">
            <div class="nav_top">
              <p>大卖场新闻</p>
              <ul v-for="(item, index) in classList" :key="index">
                <li class="active">
                  {{ item.title }}
                </li>
                <li :class="{child_active:im.id===newid}" v-for="(im, index1) in item.get_classify_type" :key="index1" @click="selectNav(im,index,item.title)">
                  {{im.title}}
                </li>
              </ul>
            </div>
            <div class="nav_btm">
              <p>联系我们</p>
              <p>热线电话：029-87781419</p>
              <p>手机：13038588710</p>
              <p>地址：北二环西段10号</p>
              <p>金泰财富中心A座505</p>
            </div>
          </div>
          <ul class="new_list" v-show="navIndex === 1">
            <li v-for="(item, index) in newsList" :key="index">
              <div class="new_left">
                <p class="new_title">{{ item.title }}</p>
                <p class="new_content">{{ item.Introduction }}</p>
                <div class="new_btn">
                  <span @click="goDetail(item.id)">查看详情</span>
                  <span @click="goConsult()">立即咨询</span>
                </div>
              </div>
              <img :src="item.img[0]" />
            </li>
            <p v-show="newsList.length<1">暂无数据</p>
          </ul>
          <ul class="new_list" v-show="navIndex === 0">
            <li v-for="(item, index) in newsList" :key="index">
              <div class="new_left other_left">
                <p class="new_title">{{ item.title }}</p>
                <p class="new_content">{{ item.Introduction }}</p>
              </div>
              <div class="other_right">
                <span v-if="item.time" class="time1">{{item.time.split('-')[2]}}</span>
                <span v-if="item.time" class="time2">{{item.time.split('-')[0]+"-"+item.time.split('-')[1]}}</span>
                <span class="detailbtn hand" @click="goDetail(item.id)">查看详情</span>
              </div>
            </li>
            <p v-show="newsList.length<1">暂无数据</p>
          </ul>
        </div>
        <div class="newsbox_btm">
          <el-pagination
            background
            layout="prev, pager, next"
            prev-text="上一页"
            next-text=" 下一页 "
            :current-page.sync="page.cont"
            :page-size="page.size"
            :total="page.total"
            @size-change="sizechange"
            @current-change="sizechange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 页脚开始 -->
    <Footer></Footer>
  </div>
</template>

<script>
import NavTab from "../components/navtab";
import Footer from "../components/footer";
export default {
  components: {
    NavTab,
    Footer,
  },
  data() {
    return {
      navlist: [
      ],
      title: '大卖场百科',
      navIndex: 0,
      newid: 1,
      page: {
        size: 5,
        cont: 1,
        allcont: 1,
        total: 10,
      },
      newsList: [], // 新闻数据
      classList: [],
    };
  },
  created() {
    //跳转到顶部
    window.scrollTo(0, 0);
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/page/home_mobile");
    }
  },
  mounted() {
    this.getNewsClass();
    // console.log(this.$route.query.num)
    // this.navIndex = +this.$route.query.num
    // this.selectNav(+this.$route.query.num)
    // console.log(this.navIndex, typeof (+this.$route.query.num))
    if (this.$route.query.newid){
      this.newid = +this.$route.query.newid
      this.title = this.$route.query.newtitle
      this.getNewsList()
    }
  },
  methods: {
    selectNav(i, index, title) {
      this.page.cont = 1
      if(title=='客户见证') {
        this.$router.push({
          path: "/page/witness",
          query: {
            newid: i.id,
            newtitle: i.title
          }
        });
        return
      }
      console.log(index)
      this.navIndex = index;
      this.newid = i.id
      this.title = i.title
      this.getNewsList()
    },
    sizechange(a) {
      console.log(a);
      this.page.cont = a;
      this.newsList = []
      this.getNewsList();
    },
    getNewsList() {
      var _this = this;
      _this.$ajax
        .get(
          "http://api.wld119.com/api/v1/article/indexs?classify_id=" + this.newid + "&page=" +
            this.page.cont
        )
        .then((res) => {
          console.log("新闻列表", res.data.result)
          this.page.total = res.data.result.total;
          this.page.allcont = res.data.result.per_page
          this.newsList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getNewsClass() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/index")
        .then((res) => {
          console.log("新闻分类", res.data.result);
          this.classList = res.data.result
          this.getNewsList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getNewsDetail() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/index_info")
        .then((res) => {
          console.log("新闻详情", res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goDetail(id) {
      this.$router.push({
        path: "/page/newsDetail",
        query: {
          id: id,
          num: 7
        },
      });
    },
    goConsult() {
      this.$router.push({
        path: "/page/about",
        query: {
          num: 6
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 头部开始*/
/* .content{} */
.con {
  width: 1200px;
  margin: 0 auto;
}
.text {
  margin-bottom: 10px;
}
.hengfu img {
  width: 100%;
}

.newsbox_top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30px;
}
.nav {
  width: 280px;
  text-align: center;
  color: #333;
}
.nav_top,
.nav_btm {
  border: 1px solid #c2c2c2;
}
.nav_btm {
  padding: 40px;
  text-align: left;
}
.nav_btm p {
  line-height: 30px;
  color: #333;
  font-size: 16px;
}
.nav_btm p:first-child {
  text-align: center;
  font-weight: bold;
}
.nav_top {
  margin-bottom: 20px;
  line-height: 60px;
}
.nav_top p {
  height: 85px;
  background: #0061ae;
  color: #fff;
  line-height: 85px;
  font-size: 30px;
}
.nav_top li {
  font-size: 16px;
  height: 60px;
  box-sizing: border-box;
  border-top: 1px solid #c2c2c2;
  cursor: pointer;
}

.new_list {
  width: 885px;
}
.new_list li {
  height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #f5f5f5;
  margin-bottom: 10px;
  /* justify-content: space-between; */
}
.new_left {
  width: 470px;
  padding: 0 26px;
  box-sizing: border-box;
}
.new_content {
  margin: 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  font-size: 13px;
}
.new_list img {
  width: 410px;
  /* height: 180px; */
}
.new_title {
  color: #0061ae;
  font-weight: bold;
  font-size: 15px;
}
.new_btn span {
  display: inline-block;
  width: 90px;
  height: 27px;
  border: 1px solid #535353;
  line-height: 27px;
  text-align: center;
  margin: 0 40px;
}
.other_left {
  width: 680px;
  height: 150px;
  padding-left: 50px;
  justify-content: space-between;
}
.other_right {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-self: ; */
}
.time1 {
  font-size: 48px;
}
.time2 {
  margin-bottom: 15px;
}
.detailbtn {
  width: 80px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: #0061ae;
  color: #fff;
  font-size: 13px;
}

.active {
  font-weight: bold;
  color: #000;
}
.child_active{
  background: #0061ae;
  color: #fff;
}
.newsbox_btm {
  width: 35%;
  margin: 0 auto;
}

/* 详情 */
.details {
  display: flex;
  justify-content: space-between;
}
.detail_left {
  width: 825px;
}
.detail_title {
  font-size: 22px;
  text-align: center;
  margin: 25px 0;
}
.detail_tips {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px dashed #c0c0be;
  padding-bottom: 25px;
}
.detail_content {
  margin: 25px 0;
}
.detail_page {
  /* font-size: 15px; */
}
.detail_page p {
  margin-bottom: 10px;
  cursor: pointer;
}
.blue {
  color: #0060b8;
}
.detail_right {
  width: 330px;
  text-align: center;
  margin-top: 25px;
}
.detail_right > p {
  font-size: 24px;
  color: #006fd1;
  border-bottom: 2px solid #bfbfbd;
  padding-bottom: 18px;
}
.detail_right li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  cursor: pointer;
}
.detail_right_icon {
  background: #bebebe;
  color: #fff;
  font-size: 40px;
  width: 20px;
  height: 20px;
  line-height: 12px;
  margin-right: 10px;
}
.icon1 {
  background: #0073c3;
}
.detail_right_tit {
  color: #393939;
  width: 250px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>